<template>
<div class="dy-main EAccountOpenQuery">
  <div class="dy-header">
    <x-header :right-options="{showMore: false}"  :left-options="{backText: '',preventGoBack: true}" @on-click-more="showMenus = true" @on-click-back="back">E账户绑定查询</x-header>
  </div>
  <div class="dy-body">
    <div class="groupInput">
      <group title="">
        <x-input title="身份证后六位" placeholder="请输入身份证后六位数" v-model="eaccountData.IDNo.val" label-width="2.05rem"></x-input>
        <x-input title="预留手机号" placeholder="请输入银行预留手机号" v-model="eaccountData.mobile.val" label-width="2.05rem"></x-input>
        <x-input title="验证码" class="weui-vcode" v-model="eaccountData.smsCode.val" placeholder="请输入验证码" :show-clear="false" @on-change="testYzm" label-width="2.05rem">
          <!-- <x-button slot="right" type="primary" :text="codeText" :disabled="disableCode" @click.native="postCode" mini></x-button> -->
          <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
        </x-input>
      </group>
    </div>
    <p>{{byx}}</p>
    <hr>
      <p>{{returnData}}</p>
    <div class="deal">
        <i class='select' @click='dealClick'><img src="../../assets/img/Financial/selected.png" alt="" v-show="deal"></i>
        <p>本人已阅读同意<a href="javascript:void(0)" class="dealCheck" @click="tipsShow = 1">《风险提示书》</a>服务协议</p>
    </div>
    <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
    <div class="surebtn">
      <x-button class="subBtn"  @click.native="toEAccountmessageY(eaccountData)" type="primary" action-type="button" :disabled="allowClick">{{buttonTxt}}</x-button>
    </div>
  </div>
  <zx-dialog v-model="tipsShow" type="tips" butType="button" :data="['确认']" @on-click-yes="clickYes">
      <div slot="body" class="tips">
        本产品为非保本浮动收益型理财产品，我行并不承诺您得本今安全和收益保障，您得本金将可能受到市场变动等因素的影响而蒙受损失。我行代
      </div>
  </zx-dialog>
</div>
</template>

<script>

export default {

  data () {
    return {
      byx: '',
      tipsShow: 0,
      errormsg: '',
      showPositionValue: false,
      eaccountData: {
        IDNo: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '身份证后6位不能为空'}]},
        mobile: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '预留手机号不能为空'}, {typeName: 'maxLen', typeVal: '12', msg: '手机号最大长度不能超过11位'}]},
        smsCode: {val: '', type: [{typeName: 'minLen', typeVal: '1', msg: '验证码不能为空'}]}
      },
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      buttonTxt: '查询',
      maskValue: '123456',
      deal: 1, // 控制勾选框
      returnData: '' // 返回请求
    }
  },
  computed: {
    allowClick () { // 按钮点击许可
      if (this.eaccountData.IDNo.val === '' || this.eaccountData.mobile.val === '' || this.eaccountData.smsCode.val === '') {
        return true
      }
      return false
    }
  },
  methods: {
    clickYes () {
    },
    back () {
      this.$publicFun.goBack(this)
    },
    dealClick: function () { // 勾选框显示事件
      let n = this.deal
      if (n === 1) {
        this.deal = 0
      } else {
        this.deal = 1
      }
    },
    testYzm () {
    },
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
      this.getCode()
    },
    toEAccountmessageY: function (module) {
      if (this.deal === 1) {
        for (let key in module) {
          let lObj = module[key]
          let lRes = this.$publicFun.formCheck(lObj)
          if (!lRes.isOK) {
            this.errormsg = lRes.msg
            this.showPositionValue = true
            return false
          }
        }
      } else {
        this.errormsg = '请同意一下协议'
        this.showPositionValue = true
        return false
      }
      this.getData()
    },
    getData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'queryBindingEAccountList', 'basic_Data': JSON.stringify({'idNo': '310107197608102414', 'mobile': this.eaccountData.mobile.val, 'smsCode': this.eaccountData.smsCode.val})}
        }),
        (response) => {
          // alert(response)
          this.byx = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.returnData = rep.body.arrays
            this.$router.push({name: 'EAccountDtail', query: {'returnData': this.returnData}})
          } else if (rep.head.respCode === '009015') {
            this.$router.push({name: 'EAccountmessageN'})
          } else {
            this.errormsg = '验证码错误'
            this.showPositionValue = true
          }
        })
    },
    /*
    * 获取短信验证码
    */
    getCode () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'getCode', 'basic_Data': JSON.stringify({'mobile': '123'})}
        }),
        (response) => {
          // alert(response)
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.eaccountData.smsCode.val = rep.body.veryCode
          }
        })
    }
  }
}
</script>
<style lang="less">
.EAccountOpenQuery {
  .deal{
      margin-top: 0.48rem;
      margin-bottom: 0.45rem;
      padding-left: 0.3rem;
      overflow: hidden;
      .select{
          float: left;
          width: 0.28rem;
          height: 0.28rem;
          border: 1px solid #bfbfbf;
          margin-right:0.21rem;
          vertical-align: middle;
          &>img{
              width: 100%;
              height: auto;
          }
      }
      &>p{
          float: left;
          width:6.43rem;
          font-size:0.22rem;
          line-height: 0.35rem;
          color: #ccc;
          .dealCheck{
              color: #3333ff;
              text-decoration: none;
              font-size:0.22rem;
          }
      }
      &>i{
          float: left;
          margin-left: 0px;
          margin-right: 0.15rem;
          &>img{
              vertical-align: top;
              width: 100%;
              height: auto;
          }
      }
  }
  .groupInput {
    background: #fff;
    margin-top:.2rem;
  }
  .surebtn {
    width:6.9rem;
    margin:.6rem auto;
  }
}
</style>
